<template>
    <block v-if="scene == 1154">
        <pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="pages houseTypePage col-3e bg-fff">
            <block v-if="kaiList.length > 0">
                <scroll-view :scroll-x="true" class="kaiNav top-20">
                    <block v-for="(kai, index) in kaiList" :key="index">
                        <view class="kaiItem" :class="currKai === index?'active':''" @click="changeKai(index)">
                            {{kai.title}}
                        </view>
                    </block>
                </scroll-view>
            </block>
            
            <block v-if="tabs.length>0">
                <view class="sizeGroup">
                    <button class="sizeBtn clearBtn left-10 bg-grey" :class="sizeCurr === sizeIndex?'active':'default'" v-for="(sizeItem, sizeIndex) in tabs" :key="sizeIndex" @click="changeTabs(sizeIndex)">{{sizeItem.size}}</button>
                </view>
                <view class="body">
                    <view class="text-center">
                        <u-swiper :list="swiperImages" :autoplay="false" height="1000" bg-color="#FFFFFF" @click="previewImage"></u-swiper>
                    </view>
                    <view class="sizeRow flex top-15">
                        <view class="rowItem text-center">
                            <view class="font15 bottom-10">{{detail.house_type?detail.house_type:'--'}}</view>
                            <text class="font13">户型</text>
                        </view>
                        <view class="rowItem text-center">
                            <view class="font15 bottom-10">{{detail.build_size_range?'约'+detail.build_size_range+'m²':'--'}}</view>
                            <text class="font13">建面</text>
                        </view>
                        <view class="rowItem flex">
                            <button class="btnItem clearBtn flex right-10" @click="remindBtn">
                                <u-icon :name="detail.store?'heart-fill':'heart'" :color="detail.store?'#007235':'#3E3A3A'" size="17"></u-icon>
                                <view class="top-2">
                                    {{detail.store?'已收藏':'收藏户型'}}
                                </view>
                            </button>
                            <button class="btnItem clearBtn flex right-0" open-type="share">
                                <u-icon name="zhuanfa" color="#333333" size="17"></u-icon>
                                <view class="top-2">
                                    转发
                                </view>
                            </button>
                        </view>
                    </view>
                    
                    <view class="anountWrap flex font13 top-10">
                        <text class="zhuangXiu col-theme bg-theme-opacity right-15 font12">精装</text>
                        <text class="right-15">总价：{{detail.amount_range?'约'+detail.amount_range+'万':'--'}}</text>
                        <text>朝向：{{detail.chao?detail.chao:'--'}}</text>
                    </view>
                    
                    <!-- <view class="cardWrap boxShow top-20">
                        <view class="cardTitle font15">
                            地毯率：{{diTanLv}}
                        </view>
                        <view class="desc font10 top-5">
                            地毯率=户型室内所有功能空间的净面积之和除以户型面积。数值为专业设计师估算，仅供参考，准确数值应以开发商提供为准。
                        </view>
                    </view> -->
                    
                    <view class="cardWrap boxShow top-20">
                        <view class="cardTitle font15">
                            户内预估面积：{{detail.size?'约'+detail.size+'m²':'--'}}<text class="font12 left-5">(含墙体不含飘窗)</text>
                        </view>
                        <view class="desc font10 top-5">*户内预估面积为户型外轮廓线围合面积，其中与交通核以及拼接户共用墙部分按照墙体一半计算，并且飘窗部分不计算面积，阳台部分算全面积。数值为专业建筑师估算，仅供参考，准确数值应以开发商公布的为准。</view>
                    </view>
                    <view class="cardWrap boxShow top-20" v-if="detail.evaluate_size.length>0">
                        <view class="cardTitle font15">房间净面积估算</view>
                        <view class="desc font12 top-5">(施工有误差，数值为专业建筑师估算，仅供参考)</view>
                        <view class="desc font10 top-5">因室内装饰风格有所差异，装饰面层厚度存在不确定性，本户型分析图房间尺寸仅表达墙面结构净尺寸（非墙体中心线之间的轴线距离）。样板间实测数据可能包含装修面层（粉刷、瓷砖、背景墙等）及施工误差，测量结果会有一定范围内的偏差。所有数值为专业建筑师估算，仅供参考，准确数值应以开发商公布的为准。</view>
                        <view class="roomSizeGroup flex top-15">
                            <block v-for="(roomItem, roomIndex) in detail.evaluate_size" :key="roomIndex">
                                <view class="itemWrap bottom-5 text-center">
                                    <view class="roomName txtHidden">{{roomItem.label}}</view>
                                    <view class="sizeWrap flex">
                                        <text class="fontBold">{{roomItem.s}}m²</text>
                                        <text class="font12 top-4">面宽{{roomItem.w}}米</text>
                                        <text class="font12 top-4">进深{{roomItem.l}}米</text>
                                    </view>
                                </view>
                            </block>
                        </view>
                    </view>
                    <view class="cardWrap boxShow top-20" v-if="detail.evaluate_house.length>0">
                        <view class="cardTitle font15">户型分析</view>
                        <view class="analysisGroup flex top-8">
                            <block v-for="(roomItem, roomIndex) in detail.evaluate_house" :key="roomIndex">
                                <view class="analItem font13 flex top-15">
                                    <view class="label text-center col-fff txtHidden">{{roomItem.label}}</view>
                                    <view class="value">{{roomItem.data}}个</view>
                                </view>
                            </block>
                        </view>
                        <view class="advantageGroup flex top-8" v-if="detail.good_list.length>0 || detail.bad_list.length>0">
                            <block v-for="(advItem, advIndex) in detail.good_list" :key="advIndex">
                                <view class="flex right-10 top-15">
                                    <u-icon name="checkmark-circle" color="#007235" size="17"></u-icon>
                                    <text class="left-3">{{advItem}}</text>
                                </view>
                            </block>
                            <block v-for="(advItem, advIndex) in detail.bad_list" :key="advIndex">
                                <view class="flex right-10 top-15">
                                    <u-icon name="close-circle" color="#8A8A8A" size="17"></u-icon>
                                    <text class="left-3">{{advItem}}</text>
                                </view>
                            </block>
                        </view>
                        <view class="evaContent top-20" v-if="detail.content">
                            <view class="headGroup flex bottom-15">
                                <view class="headIconWarp boxShow bg-fff">
                                    <view class="pangIcon bg"></view>
                                </view>
                                <view class="titleWrap flex">
                                    <view class="title col-theme bg-FFF6E0 font15">专业建筑师点评</view>
                                </view>
                            </view>
                            <text class="content">{{detail.content}}</text>
                        </view>
                    </view>
                </view>
                <view class="planWrap top-20" v-if="planList.length > 0">
                    <view class="cardTitle font15 left-15">标准层平面交通核分析</view>
                    <view class="planSwiperWrap flex top-10">
                        <view class="swItem boxShow" :class="planList.length === 1 ? 'oneItem':'moreItem'" v-for="(planItem, planI) in planList" :key="planI">
                            <view class="fontBold">
                                {{planItem.title}}
                            </view>
                            <image class="planImg top-10 bottom-5" :src="planItem.image[0].url" mode="widthFix" @click="previewPlanImage(planI)"></image>
                            <text class="desc">{{planItem.desc}}</text>
                        </view>
                    </view>
                </view>
            </block>

            <u-empty text="暂无数据" mode="list" marginTop="100" v-if="kaiList.length === 0"></u-empty>

            <!-- #ifdef MP-WEIXIN -->
            <!-- <block v-if="kaiList.length>0">
                <view class="hideBox"></view>

			    <bind-seller-bottom-bar :detail="recommendAdviser" v-if="recommendAdviser&&recommendAdviser.avatar_url"></bind-seller-bottom-bar>

                <house-type-bottom-bar :detail="productInfo" @contactPang="showQrcode=true" v-else></house-type-bottom-bar>
            </block> -->
            <!-- #endif -->

            <!-- <u-modal v-model="showQrcode" border-radius="40" :show-title="false" :show-confirm-button="false" :mask-close-able="true">
                <dialog-qrcode :qrcode="productInfo.qr_url"></dialog-qrcode>
            </u-modal> -->
        </view>
    </block>
</template>
<script>
    import { mapState, mapActions } from 'pinia';
    import { useIndexStore, useConfigStore, useUserInfoStore } from '@/store/index';
    import { panListAPI } from '@/common/api';
    import { productInfoAPI, houseEvaluationDetail, collectHouseType, floorPlanList } from '@/common/api/house';
    // import { dispatchClient } from '@/common/api-adviser';
    import { checkLogin, isBoolean } from '@/common/common';
    // import { getSellerInfoById } from '@/common/api/adviser';

	export default {
        components: {
        },
		data() {
			return {
                sizeId: null,
                kaiId: '',
                currKai: 0,
                kaiList: [],
				product_id: '',
                sizeCurr: 0,
                detail: {},
                productInfo: {},
                showQrcode: false,
                planList: [],
                pageType: '',
                start_time: 0,
                title: '',
                share: false,
                recommendAdviser: {}
            }
		},
        computed:{
            ...mapState(useConfigStore, ['scene', 'puid']),
            ...mapState(useUserInfoStore, ['userInfo']),
            tabs: function() {
                if(this.kaiList.length===0) return[];
                if(this.kaiList[this.currKai].list.length===0) return [];
                return this.kaiList[this.currKai].list.map(item => ({
                    id: item.id,
                    size: item.house_title || item.build_size_range +'m²'
                }))
            },
            
            swiperImages: function() {
                let arr = [];
                if(!this.detail || JSON.stringify(this.detail) === "{}") return arr;
                //深度户型评测图
                if(this.pageType === 'deep' && this.detail.analysis) {
                    let deepEvaImgs = this.detail.analysis.map(item => item.url);
                    arr.push([...deepEvaImgs])
                }

                if(this.detail.image.length>0) {
                    let typeImgs = this.detail.image.map(item => item.url);
                    arr.push(...typeImgs)
                }

                if(this.detail.house_image.length>0) {
                    let houseImgs = this.detail.house_image.map(item => item.url);
                    arr.push(...houseImgs)
                }
                return arr
            },
            
            planImages: function() {
                if(this.planList.length === 0) return [];
                return this.planList.map(item => item.image[0].url)
            },
            
            diTanLv: function() {
                if(this.detail.ditan_ratio) return this.detail.ditan_ratio+'%';
                let mate = /-/g;
                if(!this.detail.ditan_size || !this.detail.build_size_range || this.detail.ditan_size == '0' || this.detail.build_size_range == '0' || mate.test(this.detail.build_size_range)) {
                    return '--'
                }
                return ((this.detail.ditan_size / this.detail.build_size_range)*100).toFixed(1)+'%';
            }
        },
        onShareAppMessage(res) {
            return {
                title: `【${this.title}】户型评测详情，点击了解详情`,
                path: `/pages/product/house-type/detail/page?productId=${this.product_id}&kaiId=${this.kaiId}&title=${this.title}&share=true&puid=${this.userInfo.id}&prepage=楼盘户型评测详情-${this.product_id}-${this.title}`,
            }
        },
        
        //#ifdef MP-WEIXIN
        onShareTimeline() {
            return {
                title: `【${this.title}】户型评测详情，点击了解详情`,
                query: `productId=${this.product_id}&kaiId=${this.kaiId}&puid=${this.userInfo.id}&share=true&title=${this.title}&prepage=楼盘户型评测详情-${this.product_id}-${this.title}`
            }
        },
        //#endif
        
		onLoad(options) {
            let { productId='', sizeId='', kaiId='', puid='', share=false, pageType='', title='' } = options;
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
            
			this.product_id = productId&&productId!=='undefined'?productId:'';
            this.title = title&&title!=='undefined'?title:'';
            this.pageType = pageType&&pageType!=='undefined'?pageType:'';
            this.share = isBoolean(share);
            if(kaiId&&kaiId!=='undefined') {
                this.kaiId = kaiId
            }
            if(sizeId&&sizeId!=='undefined') {
                this.sizeId = sizeId
            }
            this.start_time = (new Date()).getTime();
            if(puid&&puid!=='undefined') {
                this.setPuid(puid)
            }
			let that = this;

            if(this.product_id){
                uni.$check_and_login(function () {
                    that.init()
                })
            }
        },

        methods: {
            ...mapActions(useConfigStore, ['setPuid']),

            async init() {
                //绑定客户
                // await dispatchClient({
                //     share: this.share,
                //     puid: this.puid,
                //     pid: this.product_id
                // })

                this.getPanList();

                //根据顾问ID获取被绑定的顾问信息
                // if(this.puid && this.puid !== this.userInfo.id) {
                //     let sellInfoRes = await getSellerInfoById({id: this.puid, productId: this.product_id});
                //     if(sellInfoRes.status === 0) {
                //         if(sellInfoRes.detail.product_id && sellInfoRes.detail.product_id == this.product_id) {
                //             this.recommendAdviser = sellInfoRes.detail;
                //         }
                //     }
                // }
            },
            
            //获取开盘id
            async getPanList(){
                uni.showLoading({
                	title: '数据加载中',
                	mask: true
                })
                let productRes = await productInfoAPI(this.product_id);
                if(productRes.status ===0) {
                    this.productInfo = productRes.detail;
                }
                let panData = await panListAPI(this.product_id);
                if(panData.status === 0) {
                    if(panData.detail.length > 0) {
                        this.kaiList = panData.detail.map(item => ({
                            ...item,
                            list: []
                        }))
                        if(this.kaiId) {
                            this.currKai = this.kaiList.findIndex(item => item.id == this.kaiId);
                        }
                    }
                    this.changeKai(this.currKai);
                    uni.hideLoading();
                }else {
                    uni.hideLoading();
                    uni.$u.toast(panData.detail)
                }
            },
            
            //切换开盘
            async changeKai(index=0){
                this.currKai = index;
                this.kaiId = this.kaiList[index].id;
                let currKaiItem = this.kaiList[index];
                if(currKaiItem.list.length ===0) {
                    let detailRes = await houseEvaluationDetail(this.kaiId);
                    
                    //获取开盘内楼层平面图
                    let floorPlanRes = await floorPlanList(this.kaiId);
                    if(floorPlanRes.status === 0) {
                        this.planList = floorPlanRes.detail;
                    }
                    
                    let findSizeIndex = 0;
                    if(detailRes.status ===0) {
                        if(detailRes.detail.length>0) {
                            currKaiItem.list = detailRes.detail;
                        }
                        if(this.sizeId) {
                            findSizeIndex = this.tabs.findIndex(item => item.id == this.sizeId)
                        }
                        await this.changeTabs(findSizeIndex>0?findSizeIndex:0)
                    }else {
                        uni.$u.toast(detailRes.detail)
                    }
                }else {
                    await this.changeTabs();
                }
            },
            
            //切换tabs面积
            changeTabs(index=0) {
                return new Promise(resolve => {
                    this.sizeCurr = index;
                    this.detail = this.kaiList[this.currKai].list[index];
                })
            },
            
            //预览图片
            previewImage(index) {
                uni.previewImage({
                	current: index,
                	urls: this.swiperImages,
                	longPressActions: {
                		itemList: ['发送给朋友', '保存图片', '收藏']
                	}
                })
            },
            
            //预览楼层平面图
            previewPlanImage(index) {
                uni.previewImage({
                	current: index,
                	urls: this.planImages,
                	longPressActions: {
                		itemList: ['发送给朋友', '保存图片', '收藏']
                	}
                })
            },
            
            //收藏
            remindBtn(){
                if(!checkLogin()) {
                    uni.navigateTo({
                        url: `/pages/login/login?productId=${this.detail.id}`
                    })
                    return
                }
                uni.showLoading({
                    title: '加载中...',
                    mask: true
                })
                collectHouseType({
                    id: this.detail.id,
                    action: 1
                }).then(res => {
                    uni.hideLoading();
                    let collectFlag = this.detail.store;
                    this.kaiList[this.currKai].list[this.sizeCurr].store = !collectFlag;
                    uni.$u.toast(collectFlag?'已取消收藏':'收藏成功,请在"我的收藏"中查看');
                }).catch(err => {
                    uni.hideLoading();
                    uni.$u.toast(err)
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
	.pages{
        line-height: 1;
		min-height: 100vh;
        overflow: hidden;
        .kaiNav{
            width: 100%;
            white-space: nowrap;
            border-bottom: 1rpx solid rgba(0,0,0,.05);
            .kaiItem{
                display: inline-block;
                margin: 0rpx 20rpx;
                padding-bottom: 20rpx;
                position: relative;
            }
            .active{
                font-size: 32rpx;
                font-weight: bold;
                &::after{
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 20%;
                    width: 60%;
                    height: 5rpx;
                    background-color: $theme-color;
                }
            }
        }
        .sizeGroup{
            padding: 28rpx 28rpx 28rpx 18rpx;
            white-space: nowrap;
            overflow-x: scroll;
            .sizeBtn{
                display: inline-block;
                padding: 6rpx 15rpx;
                border-radius: 40rpx;
                font-size: 28rpx;
            }
            .active{
                background-color: rgba(255,135,0,.3);
                color: $theme-color;
            }
            .default{
                background-color: rgba(0,0,0,.2);
                color: #FFFFFF;
            }
        }
        .body{
            padding: 0rpx 28rpx;
            .sizeRow{
                padding: 30rpx 0;
                justify-content: space-between;
                .rowItem{
                    border-right: 2rpx solid rgba(0,0,0,.05);
                    &:last-child{
                        border: none;
                    }
                    &:nth-child(1) {
                        width: 35%;
                    }
                    &:nth-child(2) {
                        width: 35%;
                    }
                    &:nth-child(3) {
                        width: 30%;
                    }
                    .btnItem{
                        margin-left: 0;
                        padding: 0;
                        font-size: 24rpx;
                        flex-direction: column;
                    }
                }
            }
            .anountWrap{
                justify-content: flex-start;
                .zhuangXiu{
                    padding: 6rpx 15rpx;
                    border: 2rpx solid theme-color;
                }
            }
            .cardWrap{
                border-radius: 20rpx;
                padding: 28rpx;
                .cardTitle{
                    border-left: 10rpx solid $theme-color;
                    padding-left: 18rpx;
                }
                .desc{
                    margin-left: 28rpx;
                    line-height: 1.5;
                }
                .roomSizeGroup{
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    .itemWrap{
                        width: 25%;
                        border-bottom: 2rpx dashed rgba(0,0,0,.5);
                        .roomName{
                            height: 60rpx;
                            line-height: 60rpx;
                            background-color: rgba(0,0,0,.1);
                            color: rgba(0,0,0,.7);
                        }
                        .sizeWrap{
                            flex-direction: column;
                        }
                    }
                }
                .analysisGroup{
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    .analItem{
                        width: 50%;
                        justify-content: flex-start;
                        .label{
                            width: 50%;
                            height: 50rpx;
                            line-height: 50rpx;
                            background-color: rgba(0,0,0,.5);
                        }
                        .value{
                            width: 45%;
                            height: 50rpx;
                            line-height: 50rpx;
                            padding-left: 10rpx;
                            border-bottom: 2rpx solid rgba(0,0,0,.2);
                        }
                    }
                }
                .advantageGroup{
                    justify-content: flex-start;
                    flex-wrap: wrap;
                }
                .evaContent{
                    .headGroup{
                        justify-content: space-between;
                        .headIconWarp{
                            width: 85rpx;
                            height: 85rpx;
                            padding: 4rpx;
                            border-radius: 50%;
                            overflow: hidden;
                            .pangIcon{
                                width: 81rpx;
                                height: 81rpx;
                                background-image: url("https://image.srea.org.cn/xcx/xpIcon.png");
                            }
                        }
                        .titleWrap{
                            width: calc(100% - 100rpx);
                            height: 85rpx;
                            justify-content: flex-start;
                            .title{
                                height: 50rpx;
                                line-height: 50rpx;
                                padding: 0 26rpx;
                                border-top-left-radius: 20rpx;
                                border-top-right-radius: 20rpx;
                                border-bottom-right-radius: 20rpx;
                            }
                        }
                    }
                    .content{
                        line-height: 1.7;
                    }
                }
            }
        }
        .planWrap{
            .cardTitle{
                border-left: 10rpx solid $theme-color;
                padding-left: 18rpx;
            }
            .planSwiperWrap{
                width: 100%;
                overflow-x: scroll;
                padding: 0 15rpx;
                justify-content: flex-start;
                align-items: stretch;
                .swItem{
                    margin: 15rpx;
                    padding: 30rpx 20rpx;
                    border-radius: 20rpx;
                    flex-shrink: 0;
                    .planImg{
                        width: 100%;
                    }
                    .desc{
                        line-height: 1.5;
                    }
                }
                .oneItem{
                    width: calc(100% - 30rpx);
                }
                .moreItem{
                    width: 70%;
                }
            }
        }
        .hideBox{
            height: 200rpx;
        }
	}
</style>